import * as VueRouter from "vue-router";
//2.调用Vue.use()函数，把 VueRouter 安装为 Vue 的插件
import Login from "../views/login/Login.vue";
import Main from "../components/Main.vue";
import ChatMenu from "../views/main/ChatMenu.vue";
import {
  ref,
  watch
} from "vue";
const routesWeb = [
  //从定向
  {
    path: "/",
    redirect: "main"
  },
  {
    path: "/main/:catchAll(.*)",
    redirect: "main"
  },
  //在 routes 数组中，申明路由的匹配规则
  // //path 表示要匹配的 hash 地址；component 表示要展示的路由组件
  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/register",
    name: "register",
    component: () => import("../views/login/Register.vue"),
  },
  {
    path: "/giteeLogin",
    name: "giteeLogin",
    component: () => import("../views/login/GiteeLogin.vue"),
  },
  {
    path: "/:catchAll(.*)",
    name: "404",
    component: () => import("../views/404.vue"),
  },
  {
    path: "/main",
    name: "main",
    component: Main,
    children: [{
      path: "chatMenu",
      name: "chatMenu",
      component: ChatMenu,
    }, ],
  },
];
const routesMB = [{
    path: "/",
    redirect: "main"
  },
  {
    path: "/main",
    redirect: "main/chat"
  },
  {
    path: "/main",
    name: "main",
    component: () => import("../views/mobile/Home.vue"),
    children: [{
        path: "chat",
        name: "chat",
        component: () => import("../views/mobile/Chat.vue"),
      },
      {
        path: "painting",
        name: "painting",
        component: () => import("../views/mobile/Painting.vue"),
      },
      {
        path: "creative",
        name: "creative",
        component: () => import("../views/mobile/Creative.vue"),
      },
      {
        path: "owner",
        name: "owner",
        meta: {
          key: 'owner'
        }, // 在元信息中添加一个 key 属性
        component: () => import("../views/mobile/Owner.vue"),
        children: [{
          path: "ownerInfo",
          name: "ownerInfo",
          component: () => import("../views/mobile/OwnerInfo.vue"),
        }, ]
      },
    ],
  },
];
// 声明变量用来接routers
const screenWidth = ref(document.body.clientWidth)
// 获取页面宽度
var routes = screenWidth.value <= 758 ? routesMB : routesWeb;

//监听窗口变化
window.onresize = () => {
  screenWidth.value = document.body.clientWidth;
};
// 监听页面宽度
watch(screenWidth, (newVal, oldVal) => {
  let timer = setTimeout(() => {
    if (newVal <= 758) {
      // 小于758就是移动端 就把移动端路由表赋给routes
      routes = routesMB
      window.location.reload()
    } else {
      // 大于就是pc端，把pc端路由表赋给routes
      routes = routesWeb
      window.location.reload()
    }
    // 重绘页面
  }, 500)
  return () => {
    // 清除定时器
    clearTimeout(timer)
  }
}, {
  // 深度清除
  deep: true,
})

//3、创建路由的示例对象
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

// 全局前置守卫
// router.beforeEach((to, from, next) => {
//   if (to.fullPath == "/register") {
//     next();
//   } else {
//     let token = localStorage.getItem("Authorization");
//     if (token === null && to.path != "/login" && to.path != "/giteeLogin") {
//       next("/login");
//     } else {
//       next();
//     }
//   }
// });
//4、向外共享路由示例对象
export default router;